<style scoped>
    .title{
         font-size: 20px;
         font-weight: bolder;
         text-align: center;
         margin: 20px 0;
    }
    .content{
        padding: 20px;
        font-weight: bold;
    }

    .date{
        color: #000;
        margin-left: 5px;
        font-size: 14px;
    }
    .amount-total{
        margin:20px 0;
        border: 1px solid #eee;
    }
    .amount-total .head{
        background-color: #eee;
    }
    .amount-total .line{
        height:40px;
        line-height:40px;
        text-align: center
    }
    .list-content{
        height: 250px;
    }
    .list-content .head{
        border-bottom: 1px dashed  #C2C2C2;
        margin-bottom: 15px;
    }
    .footer{
        border-top: 1px dashed  #C2C2C2;

    }
    .footer .incomeAmount{
        color: #58BD48;
    }
    .footer .expendAmount{
        color: #ED3833;
    }
    .text-right{
        text-align: right;
    }
</style>
<template>
    <div class="page-container">
         <div class="title">{{date}}汇总账单</div>
        <div class="content">
            <a-row>
                <a-col :span="11" class="default_tips">起始日期:<span class="date">{{beginDate}}</span></a-col>
                <a-col :offset="2" :span="11" class="default_tips">中止日期:<span class="date">{{endDate}}</span></a-col>
            </a-row>
            <div class="amount-total">
                <a-row class="head line">
                    <a-col :span="8">本期收入</a-col>
                    <a-col  :span="8">本期支出</a-col>
                    <a-col  :span="8">本期余额</a-col>
                </a-row>
                <a-row class="line">
                    <a-col :span="8">{{fmMoney(incomeAmount,2)}}</a-col>
                    <a-col :span="8">{{fmMoney(expendAmount,2)}}</a-col>
                    <a-col :span="8">{{fmMoney(balance,2)}}</a-col>
                </a-row>
            </div>
            <a-row>
                <a-col  :span="11">
                    <a-card title="本期收入" :bordered="true" >
                        <div class="list-content">
                            <a-row  class="head">
                                <a-col :span="12">业务类型</a-col>
                                <a-col :span="12" style="text-align: right;">收入金额</a-col>
                            </a-row>
                            <a-row v-for="item in incomeList">
                                <a-col :span="18">{{item.typename}}</a-col>
                                <a-col :span="6" class="text-right">{{fmMoney(item.amount,2)}}</a-col>
                            </a-row>

                        </div>
                        <a-row class="footer">
                            <a-col :span="18">合计收入</a-col>
                            <a-col :span="6" style="text-align: right;" class="incomeAmount">+{{fmMoney(incomeAmount,2)}}</a-col>
                        </a-row>
                    </a-card>
                </a-col>
                <a-col :span="11" :offset="2">
                    <a-card title="本期支出" :bordered="true" >
                        <div class="list-content">
                            <a-row class="head">
                                <a-col :span="12">业务类型</a-col>
                                <a-col :span="12" style="text-align: right;">收入金额</a-col>
                            </a-row>
                            <a-row v-for="item in expendList">
                                <a-col :span="18">{{item.typename}}</a-col>
                                <a-col :span="6" class="text-right">-{{fmMoney(item.amount,2)}}</a-col>
                            </a-row>
                        </div>
                        <a-row class="footer">
                            <a-col :span="18">合计支出</a-col>
                            <a-col :span="6" style="text-align: right;" class="expendAmount">-{{fmMoney(expendAmount,2)}}</a-col>
                        </a-row>
                    </a-card>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
    import {findDailyDetail} from "../../api/bill";
    import {fmMoney} from "../../utils";
    export default {
        data(){
            return{
                beginDate:'',
                endDate:'',
                date:'',
                incomeAmount:0,
                expendAmount:0,
                balance:0,
                incomeList:[],
                expendList:[],

            }
        },
        methods:{
            fmMoney,
            async onLoad(){
                let resp = await findDailyDetail({beginDate:this.beginDate,endDate:this.endDate});
                console.log("=resp",resp);
                var data = resp.data;
                this.incomeAmount=data.incomeAmount;
                this.expendAmount=data.expendAmount;
                this.balance=data.balance;
                this.incomeList = data.incomeList;
                this.expendList = data.expendList;
            }
        },
        mounted(){
            this.beginDate = this.$route.query.beginDate;
            this.endDate = this.$route.query.endDate;
            this.date = this.$route.query.date;
            this.onLoad();

        }
    }
</script>

